<template>
  <div>
    <div class="singerSong">
      <span class="singerSongTitle">热门50首</span>
      <span class="iconfont iconbofang1" @click="startPlaySong(spliceSongList[0],store)"></span>
      <div
        v-for="(item,index) in spliceSongList"
        :key="item.id"
        class="singerSongItem"
        @dblclick="startPlaySong(item,store)"
        :style="{backgroundColor:index%2?'#252525':'#292929'}"
      >
        <div>{{formatIndex(index+1)}}</div>
        <div>
          {{item.name}}
          <span>{{item.alia}}</span>
        </div>
        <div>{{formatTime(item.dt)}}</div>
        <div>{{item.al}}</div>
      </div>
      <p @click="ifSplice = !ifSplice" v-if="ifSplice">查看全部50首 ></p>
    </div>
    <div>
      <singer-album></singer-album>
    </div>
  </div>
</template>

<script setup lang="ts">
import singerAlbum from './singerAlbum.vue'
import { computed, onMounted, ref } from 'vue'
import startPlaySong from '@/songPlay.minxin.js'
import { useRoute } from 'vue-router'
import axios from '@/http'
import { useUserStore } from '@/store'
const route = useRoute()
const store = useUserStore()
onMounted(() => {
  getSongList()
})
const formatIndex = computed(() => {
  return index => (index < 10 ? '0' + index : index)
})
const formatTime = computed(() => {
  return time => {
    const S = Math.floor(time / 1000)
    const m = Math.floor(S / 60)
    const s = S % 60
    return `${m}:${s < 10 ? '0' + s : s}`
  }
})
const songList = ref([])
const ifSplice = ref(true)
const spliceSongList = computed(() => {
  return ifSplice.value ? songList.value.slice(0, 30) : songList.value
})
const scroll = () => {
  console.log('s')
}
const getSongList = () => {
  const { id } = route.params
  axios
    .get('/artist/top/song', {
      params: {
        id
      }
    })
    .then(res => {
      if (res.data.code === 200) {
        songList.value = res.data.songs.map(item => {
          return { ...item, alia: item.alia[0], al: item.al.name, picUrl: item.al.picUrl, duration: item.dt, singer: item.ar[0].name }
        })
        console.log(songList)
      }
    })
}
</script>

<style lang="scss" scoped>
.singerSong {
  padding: 15px 0px 60px;
  p {
    color: #878787;
    font-size: 13px;
    font-weight: bold;
    float: right;
    &:hover {
      color: #b2b2b2;
      cursor: pointer;
    }
  }
  .iconfont {
    font-size: 18px;
    font-weight: bold;
    margin-left: 32px;
    color: #878787;
    &:hover {
      color: #b2b2b2;
    }
  }
  .singerSongTitle {
    font-size: 18px;
    font-weight: bolder;
    color: #b2b2b2;
    line-height: 35px;
    &:hover {
      color: #fff;
      cursor: default;
    }
  }
  .singerSongItem {
    display: flex;
    padding: 2px 24px;
    &:hover {
      background-color: #313131 !important;
    }
    div {
      height: 35px;
      line-height: 35px;
      font-size: 13px;
      color: #535352;

      &:nth-child(1) {
        flex-basis: 50px;
      }
      &:nth-child(2) {
        flex-basis: 500px;
        color: #b2b2b2;
        span {
          color: #535352;
          margin-left: 8px;
        }
      }
      &:nth-child(3) {
        flex-basis: 100px;
      }
    }
  }
}
</style>